<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户列表</title>
		<link rel="stylesheet" type="text/css" href="layui/css/layui.css" />
		<script src="layui/layui.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>

		<div id="details" style="display: none;">
			<form id="ff" class="layui-form" action="" lay-filter="ff">
				<input type="hidden" name="token" value="231649c6-3627-4a7c-b1e0-20da6cad93d6" />
				<div class="layui-form-item">
					<label class="layui-form-label">登录名</label>
					<div class="layui-input-inline">
						<input type="text" id="LoginName" name="LoginName" required lay-verify="required" placeholder="请输入登录名"
						 autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">邮箱</label>
					<div class="layui-input-inline">
						<input type="text" id="ProtectEMail" name="ProtectEMail" required lay-verify="required" placeholder="请输入邮箱"
						 autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">手机号</label>
					<div class="layui-input-inline">
						<input type="text" id="ProtectMTel" name="ProtectMTel" required lay-verify="required" placeholder="请输入手机号"
						 autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<div class="layui-input-block">
						<button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
						<button type="reset" class="layui-btn layui-btn-primary">重置</button>
					</div>
				</div>
			</form>
		</div>


		<form id="f2" class="layui-form" action="" lay-filter="f2">
			<input type="hidden" name="token" value="231649c6-3627-4a7c-b1e0-20da6cad93d6" />
			<div class="layui-form-item">
				<label class="layui-form-label">登录名</label>
				<div class="layui-input-inline">
					<input type="text" id="userName" name="userName" placeholder="请输入登录名" autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">

				<div class="layui-inline">
					<label class="layui-form-label">创建时间</label>
					<div class="layui-input-inline" style="width: 100px;">
						<input type="text" id="beginDate" name="beginDate" placeholder="开始时间" autocomplete="off" class="layui-input">
					</div>
					<div class="layui-form-mid">-</div>
					<div class="layui-input-inline" style="width: 100px;">
						<input type="text" id="endDate" name="endDate" placeholder="结束时间" autocomplete="off" class="layui-input">
					</div>
				</div>

			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">是否锁定</label>
				<div class="layui-input-inline">
					<input type="radio" name="isLock" value="是" title="是">
					<input type="radio" name="isLock" value="否" title="否" checked>
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">排序</label>
				<div class="layui-input-inline">
					<select name="orderBy" lay-verify="">
						<option value="">请选择</option>
						<option value="LoginName">登录名</option>
					</select>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-input-block">
					<button class="layui-btn" lay-submit lay-filter="search">查询</button>
					<button type="reset" class="layui-btn layui-btn-primary">重置</button>
				</div>
			</div>
		</form>
		<table id="tt" lay-filter="test"></table>

		<script type="text/html" id="barDemo">
			<a class="layui-btn layui-btn-xs" lay-event="detail">设置</a>
		  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
		  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
		</script>

		<script>
			layui.use(['table', 'jquery', 'form', 'laydate', 'transfer'], function() {
				var table = layui.table;
				var $ = layui.jquery;
				var form = layui.form;
				var laydate = layui.laydate;
				var transfer = layui.transfer;

				laydate.render({
					elem: '#beginDate'
				});
				laydate.render({
					elem: '#endDate'
				});

				var a = null;

				//第一个实例
				table.render({
					elem: '#tt',
					height: 312,
					url: 'http://stuapi.ysd3g.com/api/GetUsersLayUI' //数据接口
						,
					method: 'post' //设置请求类型
						,
					limit: 5,
					limits: [5, 10, 15, 20],
					where: { //请求参数
						token: '231649c6-3627-4a7c-b1e0-20da6cad93d6',
						orderBy: 'CreateTime desc'
					},
					page: true //开启分页
						,
					cols: [
						[ //表头
							{
								field: 'Id',
								title: '用户id',
								sort: true,
								fixed: 'left'
							}, {
								field: 'LoginName',
								title: '用户名'
							}, {
								field: 'IsLockout',
								title: '是否锁定 '
							}, {
								field: 'LastLoginTime',
								title: '最后登录时间'
							}, {
								field: 'CreateTime',
								title: '创建时间 '
							}, {
								field: 'PsdWrongTime',
								title: '秘密错误次数'
							}, {
								field: 'LockTime',
								title: '用户锁定时间'
							}, {
								field: 'ProtectEMail',
								title: '邮箱 '
							}, {
								field: 'ProtectMTel',
								title: '手机号码'
							}, {
								field: 'RowNum',
								title: '行号'
							}, {
								fixed: 'right',
								width: 200,
								align: 'center',
								toolbar: '#barDemo'
							}
						]
					]
				});


				//监听工具条
				table.on('tool(test)', function(obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
					var data = obj.data; //获得当前行数据
					var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
					var tr = obj.tr; //获得当前行 tr 的DOM对象

					if (layEvent === 'detail') { //设置

						//获取当前用户已有角色
						$.post(
							'http://stuapi.ysd3g.com/api/GetRolesByUserIdLayUI', {
								uId: data.Id,
								token: '231649c6-3627-4a7c-b1e0-20da6cad93d6'
							},
							function(res) {
								//console.log(res);
								var arr = new Array();
								for (var i = 0; i < res.data.length; i++) {
									arr.push(res.data[i].Id);
								}
								//获取系统所有角色
								$.post(
									'http://stuapi.ysd3g.com/api/GetRolesAll', {
										token: '231649c6-3627-4a7c-b1e0-20da6cad93d6'
									},
									function(res) {
										console.log(res);
										//渲染穿梭框
										transfer.render({
											elem: '#test1' //绑定元素
												,
											data: res //绑定左侧栏数据
												,
											value: arr //绑定右侧栏数据
												,
											parseData: function(res) {
												return {
													"value": res.Id //数据值
														,
													"title": res.Name //数据标题
												}
											},
											title:['系统角色','用户角色'],
											onchange: function(role, index) {
												if (index == 0) { //左往右,用户分配角色
													for (var i = 0; i < role.length; i++) {
														$.post(
															'http://stuapi.ysd3g.com/api/AddUserToRole'
															,{
																uId:data.Id,
																rId:role[i].value,
																token: '231649c6-3627-4a7c-b1e0-20da6cad93d6'
															},function(res){
																
															},'json'
														);
													}
												}else{
													for (var i = 0; i < role.length; i++) {
														$.post(
															'http://stuapi.ysd3g.com/api/RemoveUserFromRole'
															,{
																uId:data.Id,
																rId:role[i].value,
																token: '231649c6-3627-4a7c-b1e0-20da6cad93d6'
															},function(res){
																
															},'json'
														);
													}
												}
											},
											id: 'demo1' //定义索引
										});
									}, 'json'
								);
							}, 'json'
						);


						//do somehing
						layer.open({
							type: 1,
							title: '用户<font color="red">' + data.LoginName + '</font>设置角色',
							area: ['500px', '500px'],
							content: $('#test1') //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
						});
					} else if (layEvent === 'del') { //删除
						layer.confirm('真的删除行么', function(index) {
							obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
							layer.close(index);
							//向服务端发送删除指令
							$.post(
								'http://stuapi.ysd3g.com/api/DeleteUser', {
									uid: data.Id,
									token: '231649c6-3627-4a7c-b1e0-20da6cad93d6'
								},
								function(res) {
									layer.msg(res);
								}
							);
						});
					} else if (layEvent === 'edit') { //编辑
						//do something
						a = layer.open({
							type: 1,
							title: '修改用户信息',
							area: ['500px', '400px'],
							content: $('#details') //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
						});
						form.val('ff', data); //表单回显
					}
				});
				//监听提交
				form.on('submit(formDemo)', function(data) {
					$.post(
						'http://stuapi.ysd3g.com/api/UpdateUser' //请求地址
						//,如果表单name和参数名一致，可以用$('form').serialize()//或者data.field
						, {
							email: $('#ProtectEMail').val(),
							mtel: $('#ProtectMTel').val(),
							loginName: $('#LoginName').val(),
							token: '231649c6-3627-4a7c-b1e0-20da6cad93d6'
						},
						function(res) { //回调函数
							layer.msg(res);
							layer.close(a);
						}
					);
					return false; //阻止表单提交
				});

				//监听提交
				form.on('submit(search)', function(data) {
					//表格重载
					table.reload('tt', {
						where: data.field //设定异步数据接口的额外参数
						//,height: 300
					});
					return false; //阻止表单提交
				});
			});
		</script>
	</body>


	<div id="test1" style="display: none;"></div>
</html>
